<template>
  <div role="tabpanel" class="tab-panel" id="News">
    <ul class="list-group">
      <li class="list-group-item"  v-for="item in msg" :key="item.id">
        {{item.title}}
        <button
          type="button"
          class="btn btn-primary"
          data-toggle="button"
          aria-pressed="false"
          autocomplete="off"
          @click="toNew(item)"
        >{{item.title}}</button>
      </li>
    </ul>
    <div class="alert alert-success" role="alert">
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "VueDemoNews",
 data() {
    return {
      msg: [
        { id: 1, title: "123" },
        { id: 2, title: "456" },
        { id: 3, title: "789" },
      ],
    };
  },
  methods: {
    toNew(item){
        this.$router.replace({
          name:"ItemNews",
          params:{
            id:item.id
          },
          query:{
            title:item.title
          }
        })
    }
  },
};
</script>

<style lang="scss" scoped>
</style>